<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝贝生日快乐！</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/welcome.css">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 加载屏幕 -->
    <div id="loading-screen">
        <div class="loading-content">
            <div class="birthday-cake-loading">
                <div class="cake-base"></div>
                <div class="cake-layer"></div>
                <div class="candle"></div>
                <div class="flame"></div>
            </div>
            <p class="loading-text">正在准备惊喜...</p>
            <div class="loading-bar">
                <div class="loading-progress"></div>
            </div>
        </div>
    </div>

    <!-- 主内容 -->
    <div id="main-content" class="hidden">
        <!-- 背景粒子系统 -->
        <canvas id="particles-canvas"></canvas>
        
        <!-- 音乐控制 -->
        <div class="music-control">
            <button id="music-toggle" class="music-btn">🎵</button>
        </div>

        <!-- 主容器 -->
        <div class="welcome-container">
            <!-- 倒计时区域 -->
            <div class="countdown-section">
                <h3 class="countdown-title">距离小公主生日还有</h3>
                <div class="countdown-display">
                    <div class="countdown-item">
                        <span class="countdown-number" id="days">00</span>
                        <span class="countdown-label">天</span>
                    </div>
                    <div class="countdown-item">
                        <span class="countdown-number" id="hours">00</span>
                        <span class="countdown-label">时</span>
                    </div>
                    <div class="countdown-item">
                        <span class="countdown-number" id="minutes">00</span>
                        <span class="countdown-label">分</span>
                    </div>
                    <div class="countdown-item">
                        <span class="countdown-number" id="seconds">00</span>
                        <span class="countdown-label">秒</span>
                    </div>
                </div>
            </div>

            <!-- 主标题区域 -->
            <div class="hero-section">
                <div class="birthday-crown">👑</div>
                <h1 class="main-title">
                    <span class="title-word">小</span>
                    <span class="title-word">公</span>
                    <span class="title-word">主</span>
                    <span class="title-word">的</span>
                    <span class="title-word">一</span>
                    <span class="title-word">周</span>
                    <span class="title-word">岁</span>
                    <span class="title-word">生</span>
                    <span class="title-word">日</span>
                    <span class="title-word">派</span>
                    <span class="title-word">对</span>
                </h1>
                
                <!-- 生日蛋糕 -->
                <div class="birthday-cake-container" id="birthday-cake-container">
                    <div class="birthday-cake" id="birthday-cake">
                        <div class="cake-bottom"></div>
                        <div class="cake-middle"></div>
                        <div class="cake-top"></div>
                        <div class="candle candle-1"></div>
                        <div class="flame flame-1"></div>
                        <div class="cake-decoration"></div>
                    </div>
                </div>

                <p class="subtitle">点击蛋糕开始神奇的旅程</p>
            </div>

            <!-- 导航菜单 -->
            <nav class="navigation-menu hidden" id="nav-menu">
                <div class="nav-item" data-page="story">
                    <div class="nav-icon">📖</div>
                    <span class="nav-text">成长故事</span>
                </div>
                <div class="nav-item" data-page="memories">
                    <div class="nav-icon">🎬</div>
                    <span class="nav-text">珍贵回忆</span>
                </div>
<!--                <div class="nav-item" data-page="invitation">-->
<!--                    <div class="nav-icon">💌</div>-->
<!--                    <span class="nav-text">邀请函</span>-->
<!--                </div>-->
                <div class="nav-item" data-page="wishes">
                    <div class="nav-icon">💝</div>
                    <span class="nav-text">祝福墙</span>
                </div>
                <div class="nav-item special" data-page="game">
                    <div class="nav-icon">✨</div>
                    <span class="nav-text">GAME</span>
                </div>
            </nav>
        </div>

        <!-- 烟花容器 -->
        <div id="fireworks-container"></div>
        
        <!-- 彩带容器 -->
        <div id="confetti-container"></div>
    </div>

    <!-- 音频 -->
    <audio id="background-music" loop>
        <source src="../audio/background.wav" type="audio/wav">
    </audio>
    
    <audio id="cake-explosion-sound" preload="auto">
        <source src="../audio/explosion.mp3" type="audio/mpeg">
    </audio>
    
    <audio id="fireworks-sound" preload="auto">
        <source src="../audio/fireworks.mp3" type="audio/mpeg">
    </audio>

    <script src="../js/particles.js"></script>
    <script src="../js/fireworks.js"></script>
    <script src="../js/confetti.js"></script>
    <script src="../js/welcome.js"></script>
</body>
</html>

